---
id: popover
title: Popover
sidebar_label: Popover
---

Popover component allows you to float a content panel anchored to another element, perfect for context menus, hover cards, tooltips, and much more.

## Usage

To use the `Popover`, import it from your components and pass the required `trigger` and optional `open`, `onOpenChange`, `side`, `sideOffset`, `align`, `alignOffset`, `arrowPadding`, `sticky`, `hideWhenDetached`, `avoidCollisions`, `enabled`, and `modal` props.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Popover

A simple popover that shows upon clicking the trigger element.

import PopoverBasicDemo from '../../samples/components/popover/popover_basic';
import PopoverBasicSource from '!!raw-loader!../../samples/components/popover/popover_basic';

<CodeSample>
    <PopoverBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{PopoverBasicSource}</CodeBlock>

## Popover with Alignment

Showcasing how to align the popover content relative to the trigger element.

import PopoverAlignDemo from '../../samples/components/popover/popover_align';
import PopoverAlignSource from '!!raw-loader!../../samples/components/popover/popover_align';

<CodeSample>
    <PopoverAlignDemo/>
</CodeSample>

<CodeBlock language="tsx">{PopoverAlignSource}</CodeBlock>

## Controlled Popover

Demonstrates the usage of `open` and `onOpenChange` props for controlled behavior.

import PopoverControlledDemo from '../../samples/components/popover/popover_controlled';
import PopoverControlledSource from '!!raw-loader!../../samples/components/popover/popover_controlled';

<CodeSample>
    <PopoverControlledDemo/>
</CodeSample>

<CodeBlock language="tsx">{PopoverControlledSource}</CodeBlock>

## Usage with Custom Styling

Illustrating custom styling applied to the popover content.

import PopoverStyledDemo from '../../samples/components/popover/popover_styled';
import PopoverStyledSource from '!!raw-loader!../../samples/components/popover/popover_styled';

<CodeSample>
    <PopoverStyledDemo/>
</CodeSample>

<CodeBlock language="tsx">{PopoverStyledSource}</CodeBlock>